import React, { Component } from 'react'
// import axios from 'axios'
import PubSub from 'pubsub-js'
import { wait } from '@testing-library/dom'

export default class Search extends Component {
     search = async ()=>{
    //   获取用户的输入  连续解构赋值(可以重命名)
     const {keyWordElement:{value:keyWord}} = this

    //  发送请求前通知List更新状态

    PubSub.publish('searchName',{isFirst:false,isLoading:true})
   

    // //  发送网络请求---axios方式发送
    // axios.get(`/api1/search/users?q=${keyWord}`).then(
    //     response => {
    //         // 请求成功后通知List更新状态

    //            PubSub.publish('searchName',{isLoading:false,users:response.data.items})
           
    //     },
    //     error => {
    //         // 请求失败后通知App更新状态
    //         PubSub.publish('searchName',{isLoading:false,err:error.message})
    //     }
    // )
   
    
    // fetch发送网路请求 (未优化)
//    fetch(`/api1/search/users2?q=${keyWord}`).then(
//        resionse => {
//            console.log('联系服务器成功了')
//            return resionse.json()
//        }
//     //    error =>{
//     //      console.log("联系服务器失败了",error)
//     //      return new Promise(()=>{})
//     //    }
//    ).then(
//        response =>{console.log("获取数据成功了",response)},
//     //    error => {console.log("获取数据失败了",error)}
//    ).catch(
//        (error)=>{console.log(error)}
//    )




    // fetch发送网路请求 (优化)
    try{
        const response = await fetch(`/api1/search/users?q=${keyWord}`)
        const data = await response.json();
        PubSub.publish('searchName',{isLoading:false,users:data.items})
    } catch(error){
       PubSub.publish('searchName',{isLoading:false,err:error.message})
    }

 
    

    }
    render() {
        return (
        <section className="jumbotron">
              <h3 className="jumbotron-heading">搜索github用户</h3>
                <div>
                   <input ref={c => this.keyWordElement=c } type="text" placeholder="输入关键词点击搜索"/>&nbsp;
                   <button onClick={this.search}>搜索</button>
                </div>
          </section>
        )
    }
}
